<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"
    />

    <title>切片式轮播图</title>
    <link rel="stylesheet" href="index.css" />

    <link rel="icon" type="image/x-icon" href="../../../favicon.ico" />
</head>

  <body>
    <div class="container">
      <div class="big-box"></div>
      <div class="small-box">
        <div class="img"><img src="../../images/op/1.webp" alt="" /></div>
        <div class="img"><img src="../../images/op/2.webp" alt="" /></div>
        <div class="img"><img src="../../images/op/3.webp" alt="" /></div>
        <div class="img"><img src="../../images/op/4.webp" alt="" /></div>
        <div class="img"><img src="../../images/op/5.webp" alt="" /></div>
      </div>
    </div>
    <script>
      // 获取需要操作的元素
      // 左边大图
      let big_box = document.querySelector(".big-box");
      // 图片集合
      let imgs = document.getElementsByClassName("img");
      // 定时器
      let timer = null;
      // 当前图片下标
      let index = 0;

      // 重置函数
      function reset() {
        for (let i = 0; i < imgs.length; i++) {
          imgs[i].className = "img";
        }
      }
      // 选中函数
      function selected() {
        reset();
        imgs[index].className = "img active";
      }
      // 轮播函数
      function play() {
        timer = setInterval(function () {
          selected();
          index++;
          big_box.style.backgroundImage =
            "url(../../images/op/" + index + ".webp)";
          if (index == 5) {
            index = 0;
          }
        }, 1500);
      }
      // 循环绑定每个小图片的鼠标移动事件
      for (let i = 0; i < imgs.length; i++) {
        // 鼠标移动到小图片上时触发
        imgs[i].onmousemove = function () {
          // 左边大图变成当前的小图片
          big_box.style.backgroundImage =
            "url(../../images/op/" + (i + 1) + ".webp)";
          // 执行重置函数并关闭定时器
          reset();
          clearInterval(timer);
          // 更新当前图片下标并执行轮播
          index = i + 1;
          if (index == 5) {
            index = 0;
          }
          play();
        };
      }
      // 执行轮播
      play();
    </script>
  </body>
</html>
